<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Live input record and playback</title>
    <style type='text/css'>
        ul {
            list-style: none;
        }

        #recordingslist audio {
            display: block;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<h1>Recorder.js simple WAV export example</h1>

<p>Make sure you are using a recent version of Google Chrome.</p>
<p>Also before you enable microphone input either plug in headphones or turn the volume down if you want to avoid ear
    splitting feedback!</p>

<button onclick="startRecording(this);">record</button>
<button onclick="stopRecording(this);" disabled>stop</button>

<h2>Recordings</h2>
<ul id="recordingslist"></ul>

<h2>Log</h2>
<pre id="log"></pre>

<script>
    function __log(e, data) {
        log.innerHTML += "\n" + e + " " + (data || '');
    }

    var audio_context;
    var recorder;
    var audio_blob = new Blob();

    function startUserMedia(stream) {
        audio_context = new AudioContext();
        var input = audio_context.createMediaStreamSource(stream);
        __log('Media stream created.');

        // Uncomment if you want the audio to feedback directly
        //input.connect(audio_context.destination);
        //__log('Input connected to audio context destination.');

        recorder = new Recorder(input);
        __log('Recorder initialised.');
    }

    function startRecording(button) {
        recorder && recorder.record(blob => {
            audio_blob = new Blob([audio_blob, blob]);
            console.log(blob);
        }, 40);
        button.disabled = true;
        button.nextElementSibling.disabled = false;
        __log('Recording...');
    }

    function stopRecording(button) {
        recorder && recorder.stop();
        button.disabled = true;
        button.previousElementSibling.disabled = false;
        __log('Stopped recording.');

        // create WAV download link using audio data blob
        createDownloadLink();

        recorder.clear();
    }

    function createDownloadLink() {
        recorder && recorder.exportPCM(function (blob) {
            audio_blob = new Blob([audio_blob, blob]);
            console.log(audio_blob);
            var url = URL.createObjectURL(audio_blob);
            var li = document.createElement('li');
            var au = document.createElement('audio');
            var hf = document.createElement('a');

            au.controls = true;
            au.src = url;
            hf.href = url;
            hf.download = new Date().toISOString() + '.wav';
            hf.innerHTML = hf.download;
            li.appendChild(au);
            li.appendChild(hf);
            recordingslist.appendChild(li);
            audio_blob = new Blob();
        });
    }

    window.onload = function init() {
        try {
            // webkit shim
            window.AudioContext = window.AudioContext || window.webkitAudioContext;
            navigator.mediaDevices.getUserMedia = navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia;
            window.URL = window.URL || window.webkitURL;

            __log('Audio context set up.');
            __log('navigator.getUserMedia ' + (navigator.mediaDevices.getUserMedia ? 'available.' : 'not present!'));
        } catch (e) {
            alert('No web audio support in this browser!');
        }

        navigator.mediaDevices.getUserMedia({audio: true}).then(startUserMedia).catch(function (e) {
            __log('No live audio input: ' + e);
        });
    };
</script>

<script src="../dist/recorder.js"></script>
</body>
</html>
